<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>03-运算符</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			h1 {
				height: 200px;
				line-height: 200px;
				text-align: center;
				background-color: gray;
				font-size: 100px;
			}

			/* 宽度在700~800之间，则应用以下样式 */
			/* @media (min-width: 700px) and (max-width: 800px) {
				h1 {
					background-color: orange;
				}
			} */

			/* 【更严谨的写法】屏幕宽度（打印机除外）在700~800之间，则应用以下样式 */
			@media screen and (min-width: 700px) and (max-width: 800px) {
				h1 {
					background-color: orange;
				}
			}

			/* 或运算符，在屏幕宽度小于等于700px或大于等于800px时，应用以下样式 */
			/* @media screen and (max-width: 700px) or (min-width: 800px) 无效写法 */
			/* @media screen and (max-width: 700px), (min-width: 800px) {
				h1 {
					background-color: orange;
				}
			} */

			/* 否定运算符，不是屏幕时，应用以下样式 */
			/* @media not screen {
				h1 {
					color: skyblue;
				}
			} */

			/* 肯定运算符，是屏幕且宽度小于等于700px时，应用以下样式，only 主要解决IE浏览器兼容性的问题 */
			/* @media only screen and (max-width: 700px) {
				h1 {
					color: skyblue;
				}
			} */
		</style>
	</head>
	<body>
		<h1>你好啊</h1>
	</body>
</html>
